HTML / CSS 是我第一個接觸的網頁相關語言(學了好一陣子才發現 HTML / CSS 不是程式語言，原本以為所有和網頁有關的都屬於程式語言，這樣說起來 HTML 的標籤也不算是程式碼），現在回想剛開始在學用 HTML / CSS 排版時很習慣在任何區塊設定寬度高度，後來在一次次練習被提醒不需設定高度後才真的了解，有時區塊不需固定寬度高度（原本是死記不用寫高度 XD）

這裏簡單區分設定高度寬度的時機：

• 元素若有內容通常就不需設定高度，因高度可以由其內容產生
  示意範例：
  

• 需要設定高度的情況，例如
  元素中沒有內容
  示意範例
  在 HTML 中，.box 裡面沒有內容，在 CSS 設定背景圖片，若沒有設定高度，背景圖無法呈現
  下圖是 .box 有寬高情況下的背景圖
  

--

• 有時元素也不需要設定寬度，例如：

元素的父層已經有設定寬度
示意範例

<!-- HTML -->
<div class="wrap">
  <div class="container"></div>
</div>

/* CSS */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #ccc;
}
.container {
  height: 100px;
  background-color: #253031;
  /*   width: 1200px; */
  /* 區塊元素繼承父層的寬度 */
}

像是此例子最外層 .wrap 已經設定 1200px 的寬度，子元素（.container ) 若是區塊元素，就會自適應父元素寬度，因此也會是 1200px
因此了解區塊元素的此特性，使用到區塊元素排版就可以避免寫不必要的程式碼了
列出幾個常使用到的區塊元素：

<div>   <h1>-<h6>   <p>   <ul>   <ol>   <li>   <table>   <form>   <article>   <header>   <nav>   <main>   <footer>   <section>   <hr>

• 需要設定寬度的情況：

元素有並排或置中需求
示意範例

table 雖也屬區塊元素，但是 diaplay 屬性值是 table，不會自適應父元素的寬度，因此也需設定寬度
示意範例

—
參考來源：
HTML
30天分享(18) - 行內元素 & 區塊元素 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
CSS教學 - CSS基礎您不能不知道的block(塊元素)、inline(內聯元素)差別 @ 英傑銳網路數位設計 :: 痞客邦 ::
區塊級元素 - HTML：超文本標記語言 | MDN
發現老師的文已經詳細說明關於高度了 XD
不輕易寫死高度的藝術 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天